<template>
  <div >
    <!-- 医院医生 -->
    <div class="shang">
        <div class="fgh dui">医院</div>
        <div class="fgh you">医生</div>
    </div>
    <!-- 医院医生 -->


    <!-- 搜素框 -->
    <div>
        <van-search v-model="value" placeholder="请输入搜索关键词" />
    </div>
    <!-- 搜素框 -->


    <!-- 下拉菜单 -->
    <div>
        <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
        </van-dropdown-menu>
    </div>
    <!-- 下拉菜单 -->


    <!-- 列表区域 -->
    <div class="bigbox">
        <div class="fl">
            <div>
                <img src="../../../assets/xunyilietu.png" alt="" width="100px" height="100px">
            </div>

            <div >
                <div class="matop">首都医科大学附属朝阳医院</div>
                <div class="zi matop">北京市朝阳区工人体育场南路8号</div>
                <div>
                    <div class="fl matop">
                        <van-button plain type="info" size="mini" >三甲</van-button>
                        <van-button plain type="info" size="mini" >医保</van-button>
                        <div class="zi " >已咨询1111</div>
                    </div>
                </div>
            </div>
            <div class="zi">
                <div class="weiz">900m</div>
            </div>
        </div>

        <div class="fl">
            <div>
                <img src="../../../assets/xunyilietu.png" alt="" width="100px" height="100px">
            </div>

            <div >
                <div class="matop">首都医科大学附属朝阳医院</div>
                <div class="zi matop">北京市朝阳区工人体育场南路8号</div>
                <div>
                    <div class="fl matop">
                        <van-button plain type="info" size="mini" >三甲</van-button>
                        <van-button plain type="info" size="mini" >医保</van-button>
                        <div class="zi " >已咨询1111</div>
                    </div>
                </div>
            </div>
            <div class="zi">
                <div class="weiz">900m</div>
            </div>
        </div>

        <div class="fl">
            <div>
                <img src="../../../assets/xunyilietu.png" alt="" width="100px" height="100px">
            </div>

            <div >
                <div class="matop">首都医科大学附属朝阳医院</div>
                <div class="zi matop">北京市朝阳区工人体育场南路8号</div>
                <div>
                    <div class="fl matop">
                        <van-button plain type="info" size="mini" >三甲</van-button>
                        <van-button plain type="info" size="mini" >医保</van-button>
                        <div class="zi " >已咨询1111</div>
                    </div>
                </div>
            </div>
            <div class="zi">
                <div class="weiz">900m</div>
            </div>
        </div>

        <div class="fl">
            <div>
                <img src="../../../assets/xunyilietu.png" alt="" width="100px" height="100px">
            </div>

            <div >
                <div class="matop">首都医科大学附属朝阳医院</div>
                <div class="zi matop">北京市朝阳区工人体育场南路8号</div>
                <div>
                    <div class="fl matop">
                        <van-button plain type="info" size="mini" >三甲</van-button>
                        <van-button plain type="info" size="mini" >医保</van-button>
                        <div class="zi " >已咨询1111</div>
                    </div>
                </div>
            </div>
            <div class="zi">
                <div class="weiz">900m</div>
            </div>
        </div>

        <div class="fl">
            <div>
                <img src="../../../assets/xunyilietu.png" alt="" width="100px" height="100px">
            </div>

            <div >
                <div class="matop">首都医科大学附属朝阳医院</div>
                <div class="zi matop">北京市朝阳区工人体育场南路8号</div>
                <div>
                    <div class="fl matop">
                        <van-button plain type="info" size="mini" >三甲</van-button>
                        <van-button plain type="info" size="mini" >医保</van-button>
                        <div class="zi " >已咨询1111</div>
                    </div>
                </div>
            </div>
            <div class="zi">
                <div class="weiz">900m</div>
            </div>
        </div>

        <div class="fl">
            <div>
                <img src="../../../assets/xunyilietu.png" alt="" width="100px" height="100px">
            </div>

            <div >
                <div class="matop">首都医科大学附属朝阳医院</div>
                <div class="zi matop">北京市朝阳区工人体育场南路8号</div>
                <div>
                    <div class="fl matop">
                        <van-button plain type="info" size="mini" >三甲</van-button>
                        <van-button plain type="info" size="mini" >医保</van-button>
                        <div class="zi " >已咨询1111</div>
                    </div>
                </div>
            </div>
            <div class="zi">
                <div class="weiz">900m</div>
            </div>
        </div>

        <div class="fl">
            <div>
                <img src="../../../assets/xunyilietu.png" alt="" width="100px" height="100px">
            </div>

            <div >
                <div class="matop">首都医科大学附属朝阳医院</div>
                <div class="zi matop">北京市朝阳区工人体育场南路8号</div>
                <div>
                    <div class="fl matop">
                        <van-button plain type="info" size="mini" >三甲</van-button>
                        <van-button plain type="info" size="mini" >医保</van-button>
                        <div class="zi " >已咨询1111</div>
                    </div>
                </div>
            </div>
            <div class="zi">
                <div class="weiz">900m</div>
            </div>
        </div>

        <div class="fl">
            <div>
                <img src="../../../assets/xunyilietu.png" alt="" width="100px" height="100px">
            </div>

            <div >
                <div class="matop">首都医科大学附属朝阳医院</div>
                <div class="zi matop">北京市朝阳区工人体育场南路8号</div>
                <div>
                    <div class="fl matop">
                        <van-button plain type="info" size="mini" >三甲</van-button>
                        <van-button plain type="info" size="mini" >医保</van-button>
                        <div class="zi " >已咨询1111</div>
                    </div>
                </div>
            </div>
            <div class="zi">
                <div class="weiz">900m</div>
            </div>
        </div>

        <div class="fl">
            <div>
                <img src="../../../assets/xunyilietu.png" alt="" width="100px" height="100px">
            </div>

            <div >
                <div class="matop">首都医科大学附属朝阳医院</div>
                <div class="zi matop">北京市朝阳区工人体育场南路8号</div>
                <div>
                    <div class="fl matop">
                        <van-button plain type="info" size="mini" >三甲</van-button>
                        <van-button plain type="info" size="mini" >医保</van-button>
                        <div class="zi " >已咨询1111</div>
                    </div>
                </div>
            </div>
            <div class="zi">
                <div class="weiz">900m</div>
            </div>
        </div>

        <div class="fl">
            <div>
                <img src="../../../assets/xunyilietu.png" alt="" width="100px" height="100px">
            </div>

            <div >
                <div class="matop">首都医科大学附属朝阳医院</div>
                <div class="zi matop">北京市朝阳区工人体育场南路8号</div>
                <div>
                    <div class="fl matop">
                        <van-button plain type="info" size="mini" >三甲</van-button>
                        <van-button plain type="info" size="mini" >医保</van-button>
                        <div class="zi " >已咨询1111</div>
                    </div>
                </div>
            </div>
            <div class="zi">
                <div class="weiz">900m</div>
            </div>
        </div>

        <div class="fl">
            <div>
                <img src="../../../assets/xunyilietu.png" alt="" width="100px" height="100px">
            </div>

            <div >
                <div class="matop">首都医科大学附属朝阳医院</div>
                <div class="zi matop">北京市朝阳区工人体育场南路8号</div>
                <div>
                    <div class="fl matop">
                        <van-button plain type="info" size="mini" >三甲</van-button>
                        <van-button plain type="info" size="mini" >医保</van-button>
                        <div class="zi " >已咨询1111</div>
                    </div>
                </div>
            </div>
            <div class="zi">
                <div class="weiz">900m</div>
            </div>
        </div>


        <div class="fl">
            <div>
                <img src="../../../assets/xunyilietu.png" alt="" width="100px" height="100px">
            </div>

            <div >
                <div class="matop">首都医科大学附属朝阳医院</div>
                <div class="zi matop">北京市朝阳区工人体育场南路8号</div>
                <div>
                    <div class="fl matop">
                        <van-button plain type="info" size="mini" >三甲</van-button>
                        <van-button plain type="info" size="mini" >医保</van-button>
                        <div class="zi " >已咨询1111</div>
                    </div>
                </div>
            </div>
            <div class="zi">
                <div class="weiz">900m</div>
            </div>
        </div>

        <div class="fl">
            <div>
                <img src="../../../assets/xunyilietu.png" alt="" width="100px" height="100px">
            </div>

            <div >
                <div class="matop">首都医科大学附属朝阳医院</div>
                <div class="zi matop">北京市朝阳区工人体育场南路8号</div>
                <div>
                    <div class="fl matop">
                        <van-button plain type="info" size="mini" >三甲</van-button>
                        <van-button plain type="info" size="mini" >医保</van-button>
                        <div class="zi " >已咨询1111</div>
                    </div>
                </div>
            </div>
            <div class="zi">
                <div class="weiz">900m</div>
            </div>
        </div>

        <div class="fl">
            <div>
                <img src="../../../assets/xunyilietu.png" alt="" width="100px" height="100px">
            </div>

            <div >
                <div class="matop">首都医科大学附属朝阳医院</div>
                <div class="zi matop">北京市朝阳区工人体育场南路8号</div>
                <div>
                    <div class="fl matop">
                        <van-button plain type="info" size="mini" >三甲</van-button>
                        <van-button plain type="info" size="mini" >医保</van-button>
                        <div class="zi " >已咨询1111</div>
                    </div>
                </div>
            </div>
            <div class="zi">
                <div class="weiz">900m</div>
            </div>
        </div>

        
    </div>
    <!-- 列表区域 -->

    

    


  </div>
</template>

<script>
export default {
    data(){
        return{
            value:'',
            value1: 0,
            value2: 'a',
            value3: 'e',

            option1: [
                { text: '北京', value: 0 },
                { text: '新款商品', value: 1 },
                { text: '活动商品', value: 2 },
            ],
            option2: [
                { text: '朝阳', value: 'a' },
                { text: '好评排序', value: 'b' },
                { text: '销量排序', value: 'c' },
            ],
            option3: [
                { text: '全部', value: 'e' },
                { text: '好评排序', value: 'b' },
                { text: '销量排序', value: 'c' },
            ],
        }
    }

}
</script>

<style lang="less" scoped>
.bigbox{
width: 360px;
height: 844px;
margin: 20px auto;
}
.shang{
    width: 390px;
    height: 60px;
    // background-color: red;
    border-bottom: 1px solid black;
    display: flex;
}

.fgh{
    width: 195px;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
}
.dui{
    text-align: right;
    margin-right: 20px;
    color: skyblue;
}
.you{
    margin-left: 20px;
}
.fl{
    margin-top: 20px;
    display: flex
}
.zi{
    font-size: 14px;
    color: #BDBDBD ;
}
.matop{
    margin: 10px auto;
}
.weiz{
    text-align: right;
        margin-top: 70px
}
</style>